<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户首页</title>
</head>
<link rel="stylesheet" href="css/modules/code.css">
<link rel="stylesheet" href="css/modules/laydate/default/laydate.css">
<link rel="stylesheet" href="css/modules/layer/default/layer.css">
<link rel="stylesheet" href="css/layui.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/allindex.css">

<style>
  #heardxli {
    margin-left: 300px;
  }
</style>

<body>
  <div id="heardx">
    <ul class="layui-nav" lay-filter="">
      <li class="layui-nav-item" id="bugt">梦创评测</a></li>
      <li class="layui-nav-item">
        <a href="" type="button" data-toggle="modal" data-target="#moviel">电影评测</a>
      </li>

      <li class="layui-nav-item">
        <a href="javascript:;" type="button" data-toggle="modal" data-target="#softwares">城市评测</a>
      </li>
      <li class="layui-nav-item"><a href="" id="coolme" type="button" data-toggle="modal" data-target="#modelr">模特评测</a>
      </li>
      <li class="layui-nav-item"><a href="" id="coolme" type="button" data-toggle="modal" data-target="#carval">汽车评测</a>
      </li>
      <li class="layui-nav-item"><a href="" id="coolme" type="button" data-toggle="modal" data-target="#allre">其他评测</a>
      </li>
      <li class="layui-nav-item"><a href="">退出登录</a></li>
    </ul>
  </div>

  <table class="layui-hide" id="test">
    <p id="userpc">
      用户评测分析表
    </p>
  </table>

  <!-- 电影评测模态框 -->
  {% for row in one %}
  <div class="modal fade" id="moviel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">电影评测</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div id = "moviees" class="modal-body">

          <p>
            电影名称:{{row.HeadlineOne}}
          </p>

          <p>
            {{row.HeadlineTwo}}     
            <input type="text">

          <p>
            {{row.HeadlineThree}}
            <input type="text">
          </p>

          <p>
            {{row.HeadlineFour}}
            <input type="text">
          </p>

          <p>
            {{row.HeadlineFive}}
            <input type="text">
          </p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">完成</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
  <!-- 城市评测模态框 -->
  {% for cityes in tow %}
  <div class="modal fade" id="softwares" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">城市评测</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div id = "cityse" class="modal-body">
          <p>
           城市名称:{{cityes.HeadlineOne}}
          </p>
          <p>
            {{cityes.HeadlineTwo}}
            <input type="text">
          </p>
          <p>
            {{cityes.HeadlineThree}}
            <input type="text">
          </p>
          <p>
            {{cityes.HeadlineFour}}
            <input type="text">
          </p>
          <p>
            {{cityes.HeadlineFive}}
            <input type="text">
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">完成</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
  <!-- 模特评测模态框 -->
  {% for modeles in three %}
  <div class="modal fade" id="modelr" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">模特评测</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div id="modeles" class="modal-body">
          <p>
            模特名称:{{modeles.HeadlineOne}}
          </p>
          <p>
            {{modeles.HeadlineTwo}}
            <input type="text">
          </p>
          <p>
            {{modeles.HeadlineThree}}
            <input type="text">
          </p>
          <p>
            {{modeles.HeadlineFour}}
            <input type="text">
          </p>
          <p>
            {{modeles.HeadlineFive}}
            <input type="text">
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">完成</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

  <!-- 汽车评测模态框 -->
  {% for carss in four %}
  <div class="modal fade" id="carval" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">汽车评测</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div id="cares" class="modal-body">
          <p>
            汽车名称:{{carss.HeadlineOne}}
          </p>
          <p>
            {{carss.HeadlineTwo}}
            <input type="text">
          </p>
          <p>
            {{carss.HeadlineThree}}
            <input type="text">
          </p>
          <p>
            {{carss.HeadlineFour}}
            <input type="text">
          </p>
          <p>
            {{carss.HeadlineFive}}
            <input type="text">
          </p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">完成</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

  <!-- 其他评测模态框 -->
  {% for staticbacks in five %}
  <div class="modal fade" id="allre" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">其他评测</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div id="statices" class="modal-body">
          <p>
            评测名称:{{staticbacks.Headlinename}}
          </p>
          <p>
            {{staticbacks.HeadlineOne}}
            <input type="text">
          </p>
          <p>
            {{staticbacks.HeadlineTwo}}
            <input type="text">
          </p>
          <p>
            {{staticbacks.HeadlineThree}}
            <input type="text">
          </p>
          <p>
            {{staticbacks.HeadlineFour}}
            <input type="text">
          </p>
          <p>
            {{staticbacks.HeadlineFive}}
            <input type="text">
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">完成</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/layui.js"></script>

  <script>

    layui.use('element', function () {
      var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

      //监听导航点击
      element.on('nav(demo)', function (elem) {
        //console.log(elem)
        layer.msg(elem.text());
      });
    });

    layui.use('table', function () {
      var table = layui.table;
      table.render({
        elem: '#test'
        , url: '/demo/table/user/'
        , cols: [[
          { field: 'id', width: 80, title: 'ID' }
          , { field: 'username', width: 120, title: '用户名' }
          , { field: 'wealth', width: 120, title: '账号' }
          , { field: 'sex', width: 120, title: '评测内容' }
          , { field: 'score', width: 80, title: '总分', sort: true }
          , { field: 'city', width: 400, title: '评论' }
          , { field: 'experience', width: 120, title: '用户积分', sort: true }
          , { field: 'classify', title: '职业' }
        ]]
      });
    });
  </script>

</body>

</html>